<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-Time Notifications</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js"></script>
</head>
<body>
<h1>Real-Time Notifications</h1>
<div id="notifications"></div>
<input type="text" id="message" placeholder="Enter your message">
<button onclick="sendMessage()">Send</button>

<script>
    let stompClient = null;

    function connect() {
	    const socket = new SockJS('http://localhost:12345/websocket/ws');
	    stompClient = Stomp.over(socket);
	
	    stompClient.connect({}, function (frame) {
	        console.log('Connected: ' + frame);
	        stompClient.subscribe('/topic/notifications', function (message) {
	            showNotification(message.body);
	        });
	    }, function (error) {
	        console.error('WebSocket connection error: ' + error); 
	    });
	}

  function sendMessage() {
    const message = document.getElementById('message').value;
    if (stompClient && stompClient.connected) {
        stompClient.send('/app/sendMessage', {}, message);
        console.log('Message sent:', message);
    } else {
        console.error('WebSocket connection is not established.');
    }
}

    function showNotification(message) {
        const notifications = document.getElementById('notifications');
        const notification = document.createElement('p');
        notification.textContent = message;
        notifications.appendChild(notification);
    }

    connect();
</script>
</body>
</html>